<!-- xiaomu封装的组件：签约管理、服务管理页的 状态定位元素 -->
<template>
  <div class="big-circle flex-ct" :style="{ borderColor: color }">
    <div class="small-circle flex-ct" :style="{ borderColor: color }">
      <div class=" text" :style="{ color, borderColor: color }"> {{ text }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps(['text', 'color']);
</script>

<style scoped lang="scss">
.big-circle,
.small-circle {
  border: 1px solid transparent;
  border-radius: 50%;
  color: transparent;
  font-size: 13px;
}

.big-circle {
  width: 60px;
  height: 60px;

  transform: rotate(-34deg);

  position: absolute;
  top: 0;
  left: 130px;

  background-color: #fff;

  .small-circle {
    width: 40px;
    height: 40px;

    position: relative;
  }

  .text {
    position: absolute;

    width: 76px;

    text-align: center;
    font-weight: bold;

    border: 1px solid transparent;

    background-color: #fff;
  }
}
</style>